<template>
  <div class="bg-gradient-to-r from-blue-500 to-primary rounded-lg shadow-sm p-6 text-white relative overflow-hidden">
    <div class="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full"></div>
    <div class="absolute -left-8 -bottom-8 w-24 h-24 bg-white/10 rounded-full"></div>
    
    <div class="relative">
      <div class="flex items-start mb-6">
        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
          <i class="ri-robot-line text-2xl"></i>
        </div>
        <div>
          <h3 class="font-medium text-lg">AI 简历助手</h3>
          <p class="text-sm text-white text-opacity-90 mt-1">智能优化您的简历内容，提升简历竞争力</p>
        </div>
      </div>
      
      <div class="space-y-3 mb-6">
        <div class="flex items-center text-sm">
          <i class="ri-check-line mr-2"></i>
          <span>智能分析简历亮点，突出核心优势</span>
        </div>
        <div class="flex items-center text-sm">
          <i class="ri-check-line mr-2"></i>
          <span>优化专业表达，提升简历专业度</span>
        </div>
        <div class="flex items-center text-sm">
          <i class="ri-check-line mr-2"></i>
          <span>个性化建议，完善简历内容</span>
        </div>
      </div>
      
      <button 
        @click="startOptimization"
        class="w-full py-2.5 bg-white text-primary rounded font-medium hover:bg-opacity-90 flex items-center justify-center transition-colors"
      >
        <i class="ri-magic-line mr-2"></i>
        开始优化
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  optimize: []
}>()

const startOptimization = () => {
  emit('optimize')
}
</script>
